<template>
    <a-card class="request-global-config">
        <a-tag class="mb-2" color="blue">全局公共配置</a-tag>
        <setting-item-box name="服务">
            <setting-item name="前置URL">
                <a-input  v-model:value.trim="requestOriginUrl" placeholder="http://127.0.0.1/" />
            </setting-item>
            <setting-item name="更新间隔">
                <a-input-group compact>
                    <a-input v-model:value="requestInterval" style="width: 80%" />
                    <a-select style="width: 20%;" v-model:value="requestIntervalUnit">
                        <a-select-option 
                            v-for="i in selectTimeOptions"
                            :value="i.value">
                            {{ i.label }}
                        </a-select-option>
                    </a-select>
                </a-input-group>
            </setting-item>
        </setting-item-box>
        <div>
            <a-tabs v-model:activeKey="activeKey" >
                <a-tab-pane v-for="tab in tabs" :key="tab" :tab="tab">
                </a-tab-pane>
            </a-tabs>
        </div>
        <request-header-table 
            :target="requestParams[activeKey]"
            @update="updateRequestParams"
        />
    </a-card>
</template>

<script setup lang="ts">
import settingItemBox from '@/components/chart/settingItemBox/index.vue';
import settingItem from '@/components/chart/settingItemBox/settingItem.vue';
import requestHeaderTable from '../requestHeaderTable/index.vue'
import { RequestParamsTypeEnum, type RequestParamsObjType } from '@/const';
import { ref, toRefs } from 'vue';
import { useTargetData } from '../../../../../../hooks/useTargetData';
import { selectTimeOptions } from './types';


const {dataView} = useTargetData()
const tabs = [RequestParamsTypeEnum.HEADER]
const activeKey = ref(tabs[0])

const {requestOriginUrl,requestInterval,requestIntervalUnit,requestParams} = toRefs(dataView.getRequestGlobalConfig)


const updateRequestParams = (paramsObj:RequestParamsObjType)=>{
    if(activeKey.value == RequestParamsTypeEnum.HEADER){
        requestParams.value[activeKey.value] = paramsObj
    }
}
</script>

<style lang='scss' scoped></style>